<template>
    <div class="content">
        <div class="workbench">
            <div class="worktop border_style bg_style">
                <div class="workinput">
                    <div style="margin-right:8px">
                        <YsInput clearable type="text" class="search-input" v-model="pege_param.keyword"
                            @keydown.enter.native="getObjectList" placeholder="请输入关键字">
                        </YsInput>
                    </div>
                    <div>
                        <YsButton type="primary" class="searchBtn" @click="getObjectList()">查询</YsButton>
                    </div>
                </div>
                <div class="open-btn">
                    <YsButton class="right-between" @click="openProbjectModal(null, true)">新增</YsButton>
                </div>
            </div>
            <div class="table-box border_style bg_style">
                <proTable ref="proTableDom" class="border01" :loading="page.tableLoad" :columns="page.columns"
                    :data="page.data" @clickPage="onClickPage" @rowData="handleRowData" :current="pege_param.start_recd"
                    :total="page.allTotal" :pageSize="pege_param.limit_recd"></proTable>
            </div>
            <div class="worktop worktext border_style bg_style">
                <div class="workinput">
                    委托单
                </div>
                <div class="open-btn">
                    <YsButton class="right-between" @click="openTrustModal(null, true)">新增</YsButton>
                </div>
            </div>
            <div class="table-box-bottom border_style bg_style">
                <proTable ref="entrustTableDom" class="border01" :loading="entrustPage.tableLoad"
                    :columns="entrustPage.columns" :data="entrustPage.data" @clickPage="handlePage"
                    :current="entrust_page_param.start_recd" :total="entrustPage.allTotal"
                    :pageSize="entrust_page_param.limit_recd"></proTable>
            </div>
        </div>
        <!-- 项目信息新增编辑 -->
        <project-modal
            ref="projectRef"
            :data="projectInfo"
            :add-and-exit="addAndExit"
            @handleRefresh="getObjectList">
        </project-modal>
        <!-- 委托单新增编辑 -->
        <entrust-modal
            ref="entrustRef"
            :data="entrustInfo"
            :add-and-exit="addOrEdit"
            @handleRefresh="handleTrustList"
        ></entrust-modal>
    </div>
</template>
<script>
import { mapGetters, mapActions } from "vuex";
import ProjectModal from './components/projectModal.vue'
import EntrustModal from './components/entrustModal.vue'
export default {
    name: "projectMaintenance",
    computed: {
        ...mapGetters(["getCommData"]),
    },
    components: {
        ProjectModal,
        EntrustModal
    },
    data() {
        return {
            addAndExit: true,
            projectInfo: {
                pd_code: "",
                pd_name: "",
                pd_customer: "",
                remark: "",
            },
            pege_param: {
                ent_no: "",//企业编号
                keyword: "",
                start_recd: 1,//开始数据
                limit_recd: 10,//查询的条数
            },
            page: {
                tableLoad: false,
                allTotal: 0,
                columns: [
                    {
                        title: "序号",
                        width: 80,
                        tooltip: true,
                        render: (h, params) => {
                            return h(
                                "span",
                                params.index +
                                (this.pege_param.start_recd - 1) *
                                this.pege_param.limit_recd +
                                1
                            );
                        },
                    },
                    {
                        title: "项目名称",
                        minWidth: 100,
                        key: "pd_name",
                        tooltip: true
                    },
                    {
                        title: "项目编号",
                        key: "pd_code",
                        minWidth: 100,
                        tooltip: true
                    },
                    {
                        title: "委托(制造单位)",
                        key: "pd_customer",
                        minWidth: 100,
                        tooltip: true
                    },
                    {
                        title: "检测单位",
                        key: "pd_customer",
                        minWidth: 100,
                        tooltip: true
                    },
                    {
                        title: "执行标准",
                        key: "pd_customer",
                        minWidth: 100,
                        tooltip: true
                    },
                    {
                        title: "完成日期",
                        key: "pd_customer",
                        minWidth: 100,
                        tooltip: true
                    },
                    {
                        title: "备注",
                        key: "remark",
                        minWidth: 100,
                        tooltip: true
                    },
                    {
                        title: "操作",
                        width: 150,
                        render: (h, params) => {
                            let _this = this;

                            return h("div", [
                                h("span", {
                                    domProps: {
                                        innerText: "编辑",
                                    },
                                    class: "textColor",
                                    on: {
                                        click: (event) => {
                                            this.openProbjectModal(params.row, false);
                                            event.stopPropagation();
                                        },
                                    },
                                }),
                                h("span", {
                                    domProps: {
                                        innerText: "删除",
                                    },

                                    class: "textColor",
                                    on: {
                                        click: (event) => {
                                            this.handleDlelteItem(params.row);
                                            event.stopPropagation();
                                        },
                                    },
                                }),

                            ]);

                        },
                    },
                ],
                data: [],
            },
            addOrEdit: true,
            entrustInfo: {},
            entrust_page_param: {
                p_id: '',
                start_recd: 1,//开始数据
                limit_recd: 10,//查询的条数
            },
            entrustPage: {
                tableLoad: false,
                allTotal: 0,
                columns: [
                    {
                        title: "序号",
                        width: 80,
                        tooltip: true,
                        render: (h, params) => {
                            return h(
                                "span",
                                params.index +
                                (this.pege_param.start_recd - 1) *
                                this.pege_param.limit_recd +
                                1
                            );
                        },
                    },
                    {
                        title: "委托编号",
                        minWidth: 100,
                        key: "pd_name",
                        tooltip: true
                    },
                    {
                        title: "工程名称",
                        key: "pd_code",
                        minWidth: 100,
                        tooltip: true
                    },
                    {
                        title: "单元名称",
                        key: "pd_customer",
                        minWidth: 100,
                        tooltip: true
                    },
                    {
                        title: "检件名称",
                        key: "pd_customer",
                        minWidth: 100,
                        tooltip: true
                    },
                    {
                        title: "检测地点",
                        key: "pd_customer",
                        minWidth: 100,
                        tooltip: true
                    },
                    {
                        title: "焊接方法",
                        key: "pd_customer",
                        minWidth: 100,
                        tooltip: true
                    },
                    {
                        title: "完成日期",
                        key: "remark",
                        minWidth: 100,
                        tooltip: true
                    },
                    {
                        title: "操作",
                        width: 150,
                        render: (h, params) => {
                            let _this = this;

                            return h("div", [
                                h("span", {
                                    domProps: {
                                        innerText: "编辑",
                                    },
                                    class: "textColor",
                                    on: {
                                        click: (event) => {
                                            this.openTrustModal(params.row, false);
                                            event.stopPropagation();
                                        },
                                    },
                                }),
                                h("span", {
                                    domProps: {
                                        innerText: "删除",
                                    },

                                    class: "textColor",
                                    on: {
                                        click: (event) => {
                                            this.handleDlelteTrust(params.row);
                                            event.stopPropagation();
                                        },
                                    },
                                }),

                            ]);

                        },
                    },
                ],
                data: [],
            }
        };
    },

    methods: {
        ...mapActions(['getPageQueryProjectAPI', 'delSpringProjecAPI']),
        //获取服务列表
        getObjectList() {
            let _this = this
            this.page.tableLoad = true
            _this.getPageQueryProjectAPI(this.pege_param).then(res => {
                let { data, msg, scode, status } = res;
                _this.page.tableLoad = false
                if (status === 'ok') {
                    this.page.data = data.projectInfos
                    if (data.all_recd > 0) {
                        this.page.data[0]._highlight = true
                        this.entrust_page_param.p_id = data[0]?.id;
                        // this.handleTrustList()
                    }
                    this.page.allTotal = data.all_recd
                } else {
                    _this.$YsMessage.error(msg);
                }
            }).catch(err => {
                _this.page.tableLoad = false
                _this.$YsMessage.error('获取数据失败');
            })
        },
        //分页
        onClickPage(pageNum) {
            this.pege_param.start_recd = pageNum
            this.getObjectList()
        },
        //创建项目和编辑项目
        openProbjectModal(item, flag) {
            this.addAndExit = flag
            if (!this.addAndExit) {
                this.projectInfo = {
                    pd_code: item.pd_code,
                    pd_name: item.pd_name,
                    pd_customer: item.pd_customer,
                    remark: item.remark,
                    id: item.id,
                }
            }
            this.$refs.projectRef.open()
        },
        //删除项目
        handleDlelteItem(item) {
            let _this = this;
            this.$YsModal.confirm({
                title: "删除项目信息",
                content: "<p>确认是否删除！</p>",
                onOk: () => {
                    _this.delSpringProjecAPI({ projectInfo: { id: item.id } }).then((res) => {
                        let { data, msg, scode, status } = res
                        if (status === "ok") {
                            _this.$YsMessage.success("删除成功")
                            _this.getObjectList()
                        } else {
                            _this.$YsMessage.error(msg)
                        }
                    }).catch((err) => {
                        _this.$YsMessage.error("删除失败")
                    })
                },
            })
        },
        // 单击项目信息表格行触发
        handleRowData(data) {
            this.entrust_page_param.p_id = data?.id
            // this.handleTrustList()
        },
        /**
         * 委托单相关
         */
        // 获取委托单列表
        handleTrustList() {
            let _this = this
            this.entrustPage.tableLoad = true
            _this.getPageQueryProjectAPI(this.entrust_page_param).then(res => {
                let { data, msg, scode, status } = res
                this.entrustPage.tableLoadd = false
                if (status === 'ok') {
                    this.entrustPage.data = data.projectInfos
                    this.entrustPage.allTotal = data.all_recd
                } else {
                    _this.$YsMessage.error(msg)
                }
            }).catch(err => {
                this.entrustPage.tableLoad = false
                _this.$YsMessage.error('获取数据失败')
            })
        },
        // 分页
        handlePage(pageNum) {
            this.entrust_page_param.start_recd = pageNum
            this.handleTrustList()
        },
        // 创建和编辑委托单
        openTrustModal(item, flag) {
            this.addOrEdit = flag
            if (!this.addOrEdit) {
                this.entrustInfo = {
                    pd_code: item.pd_code,
                    pd_name: item.pd_name,
                    pd_customer: item.pd_customer,
                    remark: item.remark,
                    id: item.id,
                }
            }
            this.$refs.entrustRef.open()
        },
        // 删除委托单
        handleDlelteTrust() {
            let _this = this;
            this.$YsModal.confirm({
                title: "删除委托单",
                content: "<p>确认是否删除！</p>",
                onOk: () => {
                    _this.delSpringProjecAPI({ projectInfo: { id: item.id } }).then((res) => {
                        let { msg, status } = res
                        if (status === "ok") {
                            _this.$YsMessage.success("删除成功")
                            _this.handleTrustList()
                        } else {
                            _this.$YsMessage.error(msg)
                        }
                    }).catch((err) => {
                        _this.$YsMessage.error("删除失败")
                    })
                },
            })
        }
    },
    mounted() {
        let { ent_no } = this.getCommData;
        this.pege_param.ent_no = ent_no
        this.getObjectList()
    },
};
</script>
<style lang="less" scoped>
.content {
    width: 100%;
    height: 100%;

    // padding: 0 18px;
    /deep/ .workRooter {
        p {
            color: #405680;
            font-size: 16px !important;
        }
    }

    .workbench {
        width: 100%;
        height: calc(100% - 20px);
        // padding: 18px;
        padding-bottom: 0;

        .worktop {
            display: flex;
            align-items: center;
            padding: 0 16px;
            height: 72px;
            border: 1px solid #cfd7e5;
            border-radius: 4px;
            margin-bottom: 8px;

            .workright {
                margin-left: auto;
            }

            .workinput {
                display: flex;
            }

            .open-btn {
                margin-left: auto;
            }
        }

        .worktext {
            margin-top: 8px;
        }

        .dividing-right {
            .current {
                background: #0061ff !important;
                color: #fff !important;
            }

            margin-left: auto;

            .dividing-btn {
                width: 140px;
                height: 40px;
                background: #ffffff;
                border: 1px solid #0061ff;
                opacity: 1;
                padding: 0;
                color: #0091ff;
                border-radius: 4px;
            }

            .dividing-btn2 {
                margin-left: 10px;
            }
        }
    }

    .table-box {
        width: 100%;
        height: 330px;
        border: 1px solid #cfd7e5;
        border-radius: 4px;
    }

    .table-box-bottom {
        width: 100%;
        height: calc(100% - 500px);
        border: 1px solid #cfd7e5;
        border-radius: 4px
    }
}

.model-box {
    .icon-chain {
        width: 48px;
        height: 48px;
        line-height: 48px;
        text-align: center;
        margin: 25px auto 0;

        background: rgba(0, 97, 255, 0.1);
        border: 1px solid #0061ff;
        opacity: 1;
        border-radius: 4px;

        .icon {
            font-size: 40px;
            color: #0061ff;
        }
    }

    .formconter {
        padding: 0 16px;

        /deep/.ivu-form-item {
            width: 100%;
        }
    }
}

/deep/.model-tabs {
    border: 1px solid #cfd7e5;
    border-radius: 2px;
    margin: 20px;

    .ivu-tabs-bar {
        background: #f5f7fa;
        border-bottom-color: transparent;
        margin-bottom: 22px;
    }

    .ivu-tabs-tabpane {
        background: transparent;
    }

    .ivu-input[disabled] {
        color: #405680;
    }
}

/deep/ .textColor {
    // color: '#0091FF';
    cursor: pointer;
    color: #0091ff;
    margin-right: 8px;

    &:hover {
        opacity: 0.8;
    }
}

/deep/ .textColor2 {
    // color: '#0091FF';
    color: #0091ff;
    cursor: pointer;

    &:hover {
        opacity: 0.8;
        // color: #d53939;
    }
}

.searchBtn {
    width: 80px;
    min-width: 80px;
    height: 40px;
    font-family: PingFang SC;
}
</style>
  